<template>
<div class="cartbox">
  <van-row gutter="20">
    <van-col span="8">
      <van-icon color="darkred" name="checked" />7天无理由退货
    </van-col>
    <van-col span="8">
      <van-icon color="darkred" name="checked" />24小时快速退款
    </van-col>
    <van-col span="8">
      <van-icon color="darkred" name="checked" />满88元免邮费
    </van-col>
  </van-row>
  <van-checkbox-group>
    <van-checkbox>
      <!-- 商品卡片000 -->
      <van-card
        num="名字"
        price=""
        title=""
        thumb=""
      />
      <!-- 向右边滑动删除 -->
      <!-- 步进器 -->
      
    </van-checkbox>
  </van-checkbox-group>
  <!-- 购物车为空展示 -->
      <div class="empty" >
      <img src="../../assets/custom-empty-image.jpg" alt="">
      <h3>购物车竟然是空的</h3>
      <p>再忙,也要记得买点什么犒赏自己哟</p>
    </div>
    <!-- 底部结算区域 -->
    <van-submie-bar button-text="结算">
       <template>
          累积共<span>99件商品,可以点击</span>
       </template>
    </van-submie-bar>
</div>
  
</template>
 
<script>
export default {
  name: 'Tips'
}
</script>
 
<style lang="less" scoped>
.van-col {
  font-size: .13rem;
  height: .3rem;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-icon {
    margin-right: .04rem;
  }
}
.cartbox {
  padding-bottom: 148px;
}
.van-submit-bar {
  margin-bottom: 50px;
  .van-submit-bar__tip {
    display: flex;
    align-items: center;
  }
}
.van-card__price {
  color: darkred;
}
.custom-image {
  margin-top: 20vh;
}
.empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 300px;
  overflow: hidden;
  text-align: center;
  img {
    width: 90%;
    border-radius: 50%;
  }
  h3 {
    margin: 10px 0;
  }
}
.van-card__title {
  font-size: .16rem;
  width: 1.9rem;
  height: .2rem;
  line-height: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>